<!Doctype html>
<html>

<head>
    <title>oixan的博客</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html" ; charset="utf-8">
    <link rel="stylesheet" type="text/css" href="../css/blog.css">
</head>

<body>
    <div class="head">
        <div class="headnav">
            <div class="naveframe">
                <ul class="navlist">
                    <li>
                        <a href="../index.html">
                            主页
                        </a>
                    </li>
                    <li>
                        <a href="../bloglist.html">
                            博客
                        </a>
                    </li>
                    <li>
                        <a href="../about.html">
                            关于
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="headtext">
            <div class="headtext1">世界很简单，人类很复杂。</div>
            <div class="headtext2">浮生若梦，寻寻觅觅。</div>
        </div>
    </div>

    <div class="contents-all">
        <div class="contents">

            <div class="frame">
                <div class="title">
                    <h3>2018世界杯参赛国家</h3>
                </div>
                <div class="dtime">时间：2018-06-22</div>
                <div class="detail">

                    <p>
                        <span style="font-size: 14px;">&lt;html&gt;</span>
                    </p>
                    <p>
                        <br/>
                    </p>
                    <p>
                        <span style="font-size: 14px;">&lt;head&gt;</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">&lt;title&gt;2018世界杯参赛国家&lt;/title&gt;</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">&lt;script src=&quot;echarts.js&quot;&gt;&lt;/script&gt;</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">&lt;script src=&quot;http://gallery.echartsjs.com/dep/echarts/map/js/world.js&quot;&gt;&lt;/script&gt;</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">&lt;/head&gt;</span>
                    </p>
                    <p>
                        <br/>
                    </p>
                    <p>
                        <span style="font-size: 14px;">&lt;body&gt;</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">&lt;div id=&quot;main&quot; style=&quot;width:800;height:600;position:absolute;top:10%;left:20%;&quot;&gt;&lt;/div&gt;</span>
                    </p>
                    <p>
                        <br/>
                    </p>
                    <p>
                        <span style="font-size: 14px;">&lt;script type=&quot;text/javascript&quot;&gt;</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">var myChart = echarts.init(document.getElementById(&#39;main&#39;));</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">var mapData=[</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">//东道主</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">[&#39;Russia&#39;, &#39;俄罗斯&#39;, &#39;#d6d266&#39;],</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">//欧洲区</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">[&#39;Germany&#39;, &#39;德国&#39;, &#39;#afb4db&#39;],</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">[&#39;France&#39;, &#39;法国&#39;, &#39;#b7ba6b&#39;],</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">[&#39;Spain&#39;, &#39;西班牙&#39;, &#39;#905a3d&#39;],</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">[&#39;Portugal&#39;, &#39;葡萄牙&#39;, &#39;#f05b72&#39;],</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">[&#39;Belgium&#39;, &#39;比利时&#39;, &#39;#f15b6c&#39;],</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">[&#39;United Kingdom&#39;, &#39;英格兰&#39;, &#39;#5c7a29&#39;],</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">[&#39;Iceland&#39;, &#39;冰岛&#39;, &#39;#b2d235&#39;],</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">[&#39;Croatia&#39;, &#39;克罗地亚&#39;, &#39;#deab8a&#39;],</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">[&#39;Switzerland&#39;, &#39;瑞士&#39;, &#39;#f05b72&#39;],</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">[&#39;Sweden&#39;, &#39;瑞典&#39;, &#39;#fab27b&#39;],</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">[&#39;Denmark&#39;, &#39;丹麦&#39;, &#39;#d71345&#39;],</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">[&#39;Serbia&#39;, &#39;塞尔维亚&#39;, &#39;#694d9f&#39;],</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">[&#39;Poland&#39;, &#39;波兰&#39;, &#39;#b3424a&#39;],</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">//亚洲区</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">[&#39;Korea&#39;, &#39;韩国&#39;, &#39;#f8aba6&#39;],</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">[&#39;Japan&#39;, &#39;日本&#39;, &#39;#ca8687&#39;],</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">[&#39;Iran&#39;, &#39;伊朗&#39;, &#39;#b2d235&#39;],</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">[&#39;Saudi Arabia&#39;, &#39;沙特阿拉伯&#39;, &#39;#5c7a29&#39;],</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">[&#39;Australia&#39;, &#39;澳大利亚&#39;, &#39;#bed742&#39;],</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">//南美区</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">[&#39;Brazil&#39;, &#39;巴西&#39;, &#39;#ffd400&#39;],</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">[&#39;Argentina&#39;, &#39;阿根廷&#39;, &#39;#ffce7b&#39;],</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">[&#39;Uruguay&#39;, &#39;乌拉圭&#39;, &#39;#df9464&#39;],</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">[&#39;Colombia&#39;, &#39;哥伦比亚&#39;, &#39;#dea32c&#39;],</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">[&#39;Peru&#39;, &#39;秘鲁&#39;, &#39;#aa2116&#39;],</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">//非洲区</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">[&#39;Egypt&#39;, &#39;埃及&#39;, &#39;#840228&#39;],</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">[&#39;Tunisia&#39;, &#39;突尼斯&#39;, &#39;#ed1941&#39;],</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">[&#39;Nigeria&#39;, &#39;尼日利亚&#39;, &#39;#007947&#39;],</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">[&#39;Morocco&#39;, &#39;摩洛哥&#39;, &#39;#73b9a2&#39;],</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">[&#39;Senegal&#39;, &#39;塞内加尔&#39;, &#39;#fcaf17&#39;],</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">//中北美加勒比海地区</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">[&#39;Costa Rica&#39;, &#39;哥斯达黎加&#39;, &#39;#f3704b&#39;],</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">[&#39;Mexico&#39;, &#39;墨西哥&#39;, &#39;#8552a1&#39;],</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">[&#39;Panama&#39;, &#39;巴拿马&#39;, &#39;#ffce7b&#39;]</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">];</span>
                    </p>
                    <p>
                        <br/>
                    </p>
                    <p>
                        <span style="font-size: 14px;">var countrys = function(country, color, name) {</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">return {</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">name: country,</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">value: name,</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">itemStyle: {</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">borderColor: &#39;#918597&#39;,</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">areaColor: color</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">},</span>
                    </p>
                    <p>
                        <br/>
                    </p>
                    <p>
                        <span style="font-size: 14px;">label: {</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">//show: true,</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">formatter: function(params) {</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">return params.data.value;</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">},</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">color: &#39;#f5f5f5&#39;,</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">fontSize: 10,</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">},</span>
                    </p>
                    <p>
                        <br/>
                    </p>
                    <p>
                        <span style="font-size: 14px;">emphasis: {</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">itemStyle: {</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">areaColor: &#39;#2585a6&#39;</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">},</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">label: {</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">show: true,</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">color: &#39;#fff&#39;,</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">}</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">},</span>
                    </p>
                    <p>
                        <br/>
                    </p>
                    <p>
                        <span style="font-size: 14px;">}</span>
                    </p>
                    <p>
                        <br/>
                    </p>
                    <p>
                        <span style="font-size: 14px;">}</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">var countryData = [];</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">for (var i = 0; i &lt; mapData.length; i++) {</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">countryData.push(countrys(mapData[i][0], mapData[i][2], mapData[i][1]));</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">}</span>
                    </p>
                    <p>
                        <br/>
                    </p>
                    <p>
                        <span style="font-size: 14px;">option = {</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">backgroundColor: &#39;#898989&#39;,</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">title: {</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">text: &#39;2018世界杯参赛国家&#39;,</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">textStyle: {</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">color: &#39;#fff&#39;</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">}</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">},</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">roam: true,</span>
                    </p>
                    <p>
                        <br/>
                    </p>
                    <p>
                        <span style="font-size: 14px;">tooltip: {</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">show: true,</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">formatter: function(params) {</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">return params.data.value;</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">},</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">borderWidth: 1,</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">borderColor: &#39;#fff&#39;,</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">alwaysShowContent:true,</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">//triggerOn:&#39;none&#39;,</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">},</span>
                    </p>
                    <p>
                        <br/>
                    </p>
                    <p>
                        <span style="font-size: 14px;">series: [{</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">type: &#39;map&#39;,</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">mapType: &#39;world&#39;,</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">itemStyle: {</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">areaColor: &#39;#102b6a&#39;,</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">},</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">emphasis: {</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">itemStyle: {</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">areaColor: &#39;#E8D3E3&#39;</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">}</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">},</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">data: countryData</span>
                    </p>
                    <p>
                        <br/>
                    </p>
                    <p>
                        <span style="font-size: 14px;">}]</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">};</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">var n = 0;</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">setInterval(function() {</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">myChart.dispatchAction({</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">type: &#39;showTip&#39;,</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">seriesIndex: 0,</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">name: mapData[n][0],</span>
                    </p>
                    <p>
                        <br/>
                    </p>
                    <p>
                        <span style="font-size: 14px;">})</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">myChart.dispatchAction({</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">type: &#39;mapToggleSelect&#39;,</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">seriesIndex: 0,</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">name: mapData[n][0],</span>
                    </p>
                    <p>
                        <br/>
                    </p>
                    <p>
                        <span style="font-size: 14px;">})</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">n++;</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">if (n == 32) {</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">n = 0;</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">}</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">}, 1500);</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">myChart.setOption(option);</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">&lt;/script&gt;</span>
                    </p>
                    <p>
                        <span style="font-size: 14px;">&lt;/body&gt;</span>
                    </p>
                    <p>
                        <br/>
                    </p>
                    <p>
                        <span style="font-size: 14px;">&lt;/html&gt;</span>
                    </p>
                    <p>
                        <br/>
                    </p>
                    <p>如图;</p>
                    <p><img src="../img/blogimg/201806221.gif" style="width: 80%;" alt="201806221.gif"></p>


                </div>
<a href="javascript:void(0)" onclick="showPg()">返回</a>
            </div>


        </div>
    </div>
    <div class="footer">
        <div class="footertext">©2018,oixan博客</div>
    </div>
    <span id="backtop" onclick="topFunction()">返回顶部</span>
</body>
<script  src="../js/fanhuiye.js"></script>
</html>